<template>
  <div class="">
    <div class="actiDetail_nav"></div>
    <!-- 产品相关信息 -->
    <div class="actiDetail_nav_view">
      <div class="actiDetail_nav_view_title">{{activityData.activity_name}}</div>
      <div class="actiDetail_nav_view_meta">{{ activityData.product.product_description }}</div>
      <!-- 活动标签 -->
      <div class="actiDetail_nav_view_itmes" v-if="activityData.product.product_tags.length!==0">
        <!-- activityData.product.product_tags -->
        <div class="actiDetail_nav_view_itme" v-for="(item,index) in activityData.product.product_tags" :key="index">{{item}}</div>

      </div>
      <div class="actiDetail_nav_view_rate">{{activityData.product.product_interest_rate}}%</div>
      <span class="actiDetail_nav_view_text">近一年收益率</span>
    </div>
    <div class="actiDetail_nav_img">
      <div v-for="(item,index) in actiDetailImg" :key="index">
        <img :src="item">
      </div>
    </div>
  </div>
</template>

<script>
import {getActivityGuidanceInfo} from '@/api/activity'
export default {
  data(){
    return {
      actiDetailImg:[],
      actiData:{
        product: {
          product_description: '',
          product_tags: []
        }
      }
    }
  },
  props:{
    activityData: {
      type: Object,
      default() {
        return {
          guidance_information: [],
          product: {
            product_description: '',
            product_tags: [],
          }
        }
      }
    }
  },
  created(){
    this.getActivityDetail()
  },
  methods:{
    getActivityDetail(){
      setTimeout(()=> {
        let arr = this.activityData.guidance_information
        for(let i=0;i<arr.length;i++){
          let t;
          let host = arr[i].host
          let relative_path = arr[i].relative_path
          t = host+"/"+relative_path
          this.actiDetailImg.push(t)
        }

      },500)
    },
  }
}
</script>

<style lang="less">
.actiDetail_nav{
    width: 100%;
    height: 170px;
    background-color: rgba(224, 19, 36, 100);
    text-align: center;
    border: 1px solid rgba(187, 187, 187, 100);
  }
  .actiDetail_nav_view{
    width: 94%;
    height: 235px;
    margin: 0 auto;
    margin-top: -130px;
    border-radius: 21px;
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: center;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    font-family: Arial;
    border: 1px solid blue;
    background-color: white;
    .actiDetail_nav_view_title{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(16, 16, 16, 100);
      font-size: 28px;
      text-align: left;
      font-family: PingFangSC-light;
      margin-top: 20px;
    }
    .actiDetail_nav_view_meta{
      margin:  0 auto;
       
      // display: flex;
      // justify-content: center;
      // align-items: center;
      width: 95%;
      height: 50px;
      color: rgba(162, 163, 164, 100);
      font-size: 14px;
      text-align: left;
      font-family: PingFangSC-light;
      margin-top: 10px;
      overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box;
    /* autoprefixer: off */
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3; 
    }
    .actiDetail_nav_view_itmes{
      width: 100%;
      height: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      .actiDetail_nav_view_itme{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px 5px;
        
        width: 70px;
        // height: 20px;
        background-color: #F3A5AC;
        color: #3D3D3D;
      }
    }
    .actiDetail_nav_view_rate{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(224, 19, 36, 100);
      font-size: 48px;
      text-align: left;
      font-family: PingFangSC-semiBold;
      margin-top: 20px;
    }
    .actiDetail_nav_view_text{
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(162, 163, 164, 100);
      font-size: 14px;
      text-align: left;
      font-family: PingFangSC-regular;
      margin-top: 5px;
    }
  }
  .actiDetail_nav_img{
    // border: 1px solid red;
    margin: 20px auto;
    margin-bottom: 100px;
    width: 95%;
    // height: 300px;

    img{
      margin: 1px auto;
      width:  100%;
      // height: 370px;
    }
  }
</style>